﻿@using MvcHtmlHelpers
@using TypeRacer.Models
@{
    ViewBag.Title = "Book Management";
    Layout = "~/Views/Shared/_Admim.cshtml";
        
}
@model Book


@section Content
{
    <div style="margin-bottom: 10px;" >
        <div id="commandMenu" >
            <a id="add" href="#addForm"  ></a>
        </div>
        <div id="search" >
            @using (@Ajax.BeginForm("Search", "Book", new AjaxOptions()
                {
                    HttpMethod = "GET",
                    UpdateTargetId = "gridBook",
                    InsertionMode = InsertionMode.Replace

                }))
            {
                <input type="text" name="q" id="q" />
                <input type="submit" name="Search" value="Search" @*onclick="window.history.pushState('string', '@ViewBag.Title', '@Request.RawUrl'+'/Search/q='+document.getElementById('q').value);"*@ />
            }
        </div>
        <div style="clear: both" ></div>
    </div>
    
    
    <div id="gridBook" >
        @Html.Partial("_ListOfBook", ViewData["Data"], ViewData)
    </div>
    
    
    <div id="addForm" style="display: none" >
       @using (@Ajax.BeginForm("AddBook", "Book", new AjaxOptions()
            {
                HttpMethod = "POST",
                OnComplete = "addBookCompleted",
                LoadingElementId = "progress",
                UpdateTargetId = "gridBook",
                InsertionMode = InsertionMode.Replace
                
            }))
        {
            <table>
                <tr>
                    <td>@Html.LabelFor(x=>x.Title)</td>
                    <td>@Html.TextBoxFor(x=>x.Title)</td>
                </tr>
                <tr>
                    <td>@Html.LabelFor(x=>x.ISBN)</td>
                    <td>@Html.TextBoxFor(x => x.ISBN)</td>
                </tr>    
                <tr>
                    <td>@Html.LabelFor(x=>x.Author)</td>
                    <td>@Html.TextBoxFor(x => x.Author)</td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="Add" href="progress" id="btnAddBook" />
                    </td>
               
                </tr>
            
            </table>
           <div id="progress" style="display: none" >
                <img src="@Url.Content("~/Content/fancybox/fancybox_loading.gif")" alt="loading..." title="loading..." />
            </div>
        }

    </div>
    
    
   
}



@section script
{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#add").fancybox({
                'scrolling'		: 'no',
	            'titleShow'		: false
	        });

	        
	    });

	    function addBookCompleted() {
	        $.fancybox.close();
	        
        }

	   
    </script>
}
